<template>
  <button @click="show = !show">Toggle</button>
  <transition name="slide-fade">
    <div v-if="show" class="box">This is a box!</div>
  </transition>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const show = ref(false);
    return { show };
  },
};
</script>

<style>
/* 定义动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: transform 0.3s ease-out;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-10px);
  opacity: 0;
}
/* .box {
  border: 1px solid #eee;
  padding: 10px;
  margin-top: 10px;
} */
</style>
